<%@page language="java" pageEncoding="UTF-8" contentType="text/html; charset=utf-8" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="description" content="description of your site" />
    <meta name="author" content="author of the site" />
    <title>类别列表</title>
    <link rel="stylesheet" href="../css/bootstrap.css" />
    <link rel="stylesheet" href="../css/bootstrap-responsive.css" />
    <link rel="stylesheet" href="../css/styles.css" />
    <link rel="stylesheet" href="../css/toastr.css" />
    <link rel="stylesheet" href="../css/fullcalendar.css" />
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.js"></script>
    <script src="../js/jquery.knob.js"></script>
    <script src="../js/d3.v3.min.js"></script>
    <script src="../js/jquery.sparkline.min.js"></script>
    <script src="../js/toastr.js"></script>
    <script src="../js/jquery.tablesorter.min.js"></script>
    <script src="../js/jquery.peity.min.js"></script>
    <script src="../js/fullcalendar.min.js"></script>
    <script src="../js/gcal.js"></script>
    <script src="../js/setup.js"></script>

    <script>
        $(function (){
          $.ajax({
              url:"categories",
              dataType:"json",
              success(categories){
                  console.log(categories)
                  findToTree(categories);
              }
          })
            function findToTree(categories){
              let str="";
              for(let i in categories){
                  let c = categories[i];
                  if (c.categoryGrade==1){
                      str="";
                  }else if (c.categoryGrade==2){
                      str="----";
                  }else {
                      str="--------";
                  }
                  let tr = $("<tr>\n"+ "<td>"+c.id+"</td>\n"+
                     "       <td>"+str+c.categoryName+"</td>\n"+
                     "       <td>"+c.categoryDescription+"</td>\n"+
                     "       <td>"+(c.categoryParentId==0?'根类别':''+c.categoryParentId)+"</td>\n"+
                     "       <td>"+(c.categoryLeaf==1?'是':'否')+"</td>\n"+
                     "       <td>"+c.categoryGrade+"</td>\n"+
                     "       <td>"+new Date(c.categoryCreateTime)+"</td>\n"+
                     "       <td>"+new Date(c.categoryUpdateTime)+"</td>\n"+
                     "       <td>\n"+
                     "           <div class=\"btn-group\">\n"+
                     "              <button class=\"btn\">操作</button>\n"+
                     "              <button data-toggle=\"dropdown\" class=\"btn dropdown-toggle\">\n"+
                  "                     <span class=\"caret\"></span>\n"+
                  "                 </button>\n"+
                  "                  <ul class=\"dropdown-menu\">\n"+
                  "                     <li>\n"+
                  "                         <a href=\"findById?id="+c.id+"\">添加子类别</a>\n"+
                  "                         <a href=\"#\">修改</a>\n"+
                  "                          <a href=\"#\">删除</a>\n"+
                  "                     </li>\n"+
                  "                  </ul>\n"+
                  "            </div>\n"+
                  "         </td>\n"+
                  "      </tr>")
                  //递归的逻辑操作
                  if(!c.leaf){
                      $(tr).appendTo("#tbody");
                      //递归
                      findToTree(c.children)
                  }else {
                      $(tr).appendTo("#tbody");
                  }

              }
            }
        })
    </script>
</head>
<body>
<!-- header部分 -->
<%@include file="../header.jsp"%>
<div class="page">
    <div class="page-container">
        <div class="container">
            <div class="row">
                <div class="span12">
                    <a href="#newUserModal" data-toggle="modal" class="btn pull-right">添加根类别</a>
                    <h4 class="header">类别列表</h4>
                    <table class="table table-striped sortable">
                        <thead>
                        <tr>
                            <th>类别ID</th>
                            <th>类别名称</th>
                            <th>类别描述</th>
                            <th>上一级类别名称</th>
                            <th>是否是叶子节点</th>
                            <th>级别</th>
                            <th>创建时间</th>
                            <th>更新时间</th>
                        </tr>
                        </thead>
                        <tbody id="tbody">
                        <%--<c:forEach items="${categories}" var="c">
                        <tr>
                            <td>${c.id}</td>
                            <td>${c.categoryName}</td>
                            <td>${c.categoryDescription}</td>
                            <td>${c.categoryParentId==0?"根类别":""+c.categoryParentId}</td>
                            <td>${c.categoryLeaf==1?"是":"否"}</td>
                            <td>${c.categoryGrade}</td>
                            <td>${c.categoryCreateTime}</td>
                            <td>${c.categoryUpdateTime}</td>
                            <td>
                                <div class="btn-group">
                                    <button class="btn">操作</button>
                                    <button data-toggle="dropdown" class="btn dropdown-toggle">
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="findById?id=${c.id}">添加子类别</a>
                                            <a href="#">修改</a>
                                            <a href="#">删除</a>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        </c:forEach>--%>
                        </tbody>
                    </table>
                    <div class="pagination pagination-centered">
                        <ul>
                            <li class="disabled"><a href="#">&laquo;</a></li>
                            <li class="active"><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li><a href="#">&raquo;</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div id="newUserModal" class="modal hide fade">
            <div class="modal-header">
                <button type="button" data-dismiss="modal" aria-hidden="true"
                        class="close">&times;</button>
                <h3>添加根类别</h3>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="insertRootCategory" method="post">
                    <div class="control-group">
                        <label   class="control-label">类别名称</label>
                        <div class="controls">
                            <input type="text" name="categoryName" placeholder="类别描述"/>
                        </div>
                    </div>
                    <div class="control-group">
                        <label   class="control-label">类别描述
                        </label>
                        <div class="controls">
                            <textarea rows="5" cols="20" name="categoryDescription" placeholder="请输入类别描述"></textarea>
                        </div>
                    </div>


                    <div class="modal-footer">
                        <a href="#" data-dismiss="modal" class="btn">关闭</a><input
                            type="submit" class="btn btn-primary"
                            value="添加" />
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<%@include file="../footer.jsp"%>
</body>
</html>
